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React Basics 


Environment Setup for Mac 
e Visual Studio Code 
e NVM 
e NodeJS 
e Yarn 


Environment Setup for Windows 
e Visual Studio Code 


e GitBash 

e NodeJS 

e Yarn 
Deploying our app 


e Github Repo of completed monsters rolodex project 
e Google Fonts 


Introducing lifecycle methods 
e Github Repo of lifecycles example 


Master Project: Setting Up E-commerce Project 


E-Commerce Homepage + SASS Setup 
e Github Repo for start of lesson 
e Github Repo of end of lesson 
e https://www.npmjs.com/package/node-sass 


Homepage and Directory Components 
e Github Repo for start of lesson 


Styling Menu Items 
e Github Repo of end of lesson 


Master Project: React Router and Routing 


Routing in our project 
e React router dom documentation 
e Github Repo for start of lesson 
e Github Repo of end of lesson 
e react-router-dom 


React Router Dom 
ə Github repo for sample project 


withRouter() 
e What are higher order components? 
e Github Repo for start of lesson 
e Github Repo of end of lesson 


Master Project: Forms + Components 


Shop Page 
e Github Repo for start of lesson 


Collection Item 
e Github Repo for end of lesson 


Header Component 
e Github Repo for start of lesson 
e Github Repo for end of lesson 


Sign in Component 
e Github Repo for start of lesson 


Custom button component 
e Github Repo for start of lesson 


Master Project: Firebase + User Authentication 


Firebase introduction 
e Firebase website 


Adding a project to firebase 
e Github Repo for start of lesson 
e firebase 


Google sign in authentication 
e Firebase web documentation 


Google sign in authentication 3 
e Github Repo for end of lesson 
e CSS Border Box 


Storing user data in firebase 
ə Github Repo for start of lesson 


Sign up with email and password 
e Github Repo for end of lesson 


Sign in with email and password 
e Github Repo for start of lesson 
e Github Repo for end of lesson 


Master Project: Redux 1 


Setting Up Redux 1 

Github Repo for start of lesson 
e redux 

e redux-logger 

e react-redux 


connect() and mapStateToProps 
e Github Repo for end of lesson 


User redirect and user action type 
e Redirect component documentation 
e Github Repo for start of lesson 
e Github Repo for end of lesson 


Cart component 
e Github Repo for start of lesson 


Implementing Redux in Cart 


e Github Repo for end of lesson 


Add to cart styling 
e Github Repo for start of lesson 


Cart item reducer 
e Github Repo for end of lesson 


Adding multiple items to cart 
e Github Repo for start of lesson 
e Github Repo for end of lesson 


Cart item component 
e Github Repo for start of lesson 
e Github Repo for end of lesson 


Reselect library 
e reselect 
ə Github Repo for start of lesson 
e Github Repo for end of lesson 


User selectors 
e Github Repo for start of lesson 


Checkout item component 
e UTF-8 Wingdings 
e Github Repo for end of lesson 


Remove ltems from Cart 
ə Github Repo for start of lesson 
e Github Repo for end of lesson 


Remove Items at checkout 
ə Github Repo for start of lesson 
e Github Repo for end of lesson 


Master Project: Session storage + persistence 


Local storage and session storage 
e window.localStorage 
e window.sessionStorage 


Redux persist 
e Redux-persist 
e Github Repo for start of lesson 
e Github Repo for end of lesson 


Master Project: Redux 2 


Directory state into Redux 
e Github Repo for start of lesson 


Master Project: State Normalization 


Data flow in our app 
e Github Repo for end of lesson 


Master Project: Stripe Payments Part 1 


Introduction to stripe 
e stripe 


Stripe integration 
e Github Repo for start of lesson 
e React-stripe-checkout 


Finishing touches + look ahead 
e Github Repo for end of lesson 


Master Project: Deploying to Production 


Deploying to Heroku 
e Heroku 


Optimizing production build 
e Github Repo for start of lesson 
e Github Repo for end of lesson 


Master Project: CSS-in-JS Styled Components 


CSS in JS 
e http://getbem.com/ 
e styled components 


Styled-components in our app 
e Github Repo for start of lesson 
e Github Repo for end of lesson 


Exercise: styled-components 
e Github repo our code up until now 
e Github Repo to our project converted to styled-components 


Master Project: Advanced Redux + Firebase 


Moving our shop data to firebase 
e Github Repo for start of lesson 


Master Project: HOC Patterns 


WithSpinner HOC 
e css keyframe animations 


Optional: How to build HOCs 
e Github Repo for project demonstrating HOC pattern 


Master Project: Asynchronous Redux 


Promise Pattern 
e Firestore rest api documentation 
e Github Repo for end of lesson 


Redux thunk 
e redux-thunk 
e Github Repo for start of lesson 


Master Project: Container Pattern 


Container Pattern 
e Github Repo for end of lesson 


Master Project: Redux Saga 


Generator functions 
e generator function documentation 


Redux-saga 
e Github Repo for start of lesson 
e Redux-saga 


take(), takeEvery(), takeLatest() 
e Github: take/takeLatest/takeEvery 


Root saga 
e Github Repo for end of lesson 


Planning ahead with sagas 
e Github Repo for start of lesson 


Clear Cart Saga 
e Github Repo for code up to now 


Solution: Sign up saga 
e Github Repo for end of lesson 


Master Project: React Hooks 


React hooks introduction (useState) 
e Introducing hooks 
e useState documentation 
e Github Repo for useState example 


useEffect 
e Github Repo for useEffect example 
e useEffect documentation 


Hook Rules 
e hook rules 


Converting class components with useState 
e Github Repo for start of lesson 


Custom hooks 
e Github Repo for custom hook example (useFetch) 


useReducer 
e Github Repo for useReducer example 
e useReducer documentation 


Master Project: Stripe Payments Part 2 - Backend 


Introduction to backend 
e Github Repo with full code 


Creating our server inside the project 
e concurrently 
e nodemon 
e Github Repo for start of lesson 


Building a basic server 
express 

dotenv 

CORS 
bodyParser 


Backend payment route 
e stripe 


Connecting client to server 
e axios 
e fetch POST documentation 


Deploying to production 
e Heroku config variables documentation 
e Github Repo with full code 


Master Project: Context API 


Introduction to ContextAPI 
e ContextAPI documentation 
e Github Repo for start of lesson 


ContextConsumer + useContext Hook 
e useContext documentation 


Provider context pattern 2 
e Github Repo for code up to now 
e Github Repo for completed context exercise 


Redux vs ContextAPI 
e Github Repo for completed context exercise 


Master Project: GraphQL + Apollo 


Introduction to GraphQL 
e GraphQL website 


GraphQL Playground 
e Link to GraphQL playground 
Prisma 
Alternative to Prisma: Hasura 
GraphQL primitive types 
Github Repo for Crwn-Clothing Prisma Backend 


Introduction with Apollo 

Github Repo for start of lesson 
Apollo docs 

apollo-boost 

react-apollo 

grapha| 


Apollo Container 
e Import default as alias 


Query with variables 
e Crwn-Clothing playground 


Mutations on the client 
e Apollo cache 
e Resolvers documentation 


Cartltem Count with Apollo 
e react-apollo graphql() docs 
e Github Repo for code up to now 
e Github Repo for completed context exercise 


Should you use GraphQL? 
e Apollo moving away from graphql HOC 


Mobile Support 


Mobile Responsiveness 1 
e @media queries 
e Github Repo for start of lesson 


Mobile Responsiveness 2 
e CSS grid cheatsheet 
e Github Repo for code up to now 
e Github Repo for completed context exercise 


Performance 


Code Splitting Introduction 
e code splitting documentation 


Intro to section 
e Github Repo for start of lesson 


React Lazy + Suspense 
e React lazy 
e React suspense 


Error Boundaries 
e Error boundaries 
e 404 images 


React.memo, PureComponent, shouldComponentUpdate 
e React.memo 
e PureComponent 
e React devTools 


useCallback 
e useCallback 
e Javascript set 
e Github Repo for lesson 


useMemo 
e useMemo 


Gzipping and Compression 
e compression 


Progressive Web apps 


Converting our App to PWA 
e express-sslify 
e lighthouse plugin 
e crwn-live 


Webpack + Babel 


Introduction to Webpack + Babel 
e Github Repo for start of lesson 
Webpack docs 
What is regex? 
What is babel? 
Babel-loader 


Webpack Config 
e Style-loader 
e CSS-loader 
e html-webpack-plugin 
e Github repo for end of lesson 


Build a Gatsby blog 


Introduction to Gatsby.js 
e Gatsby.js 


Starting a Gatsby project 
e Gatsby-CLl 
e Gatsby blog starter 
e Gatsby Plugin Directory 


Gatsby Pages 
e Gatsby pages documentation 
e useStaticQuery documentation 


Gatsby GraphQL + Markdown 
e Markdown cheatsheet 


Building our blog 1 
e gatsby-transformer-remark 
e gatsby-source-filesystem 


Building our blog 2 

e gatsby-node.js API 

e createFilePath documentation 
Building our blog 3 

e create-pages 

e createPage 

e tagged-template-literals 


Building our blog 4 
e dangerouslySetInnerHTML documentation 
e path 


Building our blog 5 
e styled-components 
e gatsby-plugin-styled-components 
e babel-plugin-styled-components 
e netlify 


